<template>
  <div>
    <!-- 列表 -->
    <div class="bigContentWrap">
      <div class="searchList">
        <el-form :inline="true" :model="formQuery" class="demo-form-inline">
          <el-form-item label="关键字:">
            <el-input v-model="formQuery.approvelItemName" placeholder="请输入审批事项编号/名称查询" style="width: 23rem;" size="mini"></el-input>
          </el-form-item>
          <el-form-item style="margin-left: 20px;">
            <el-button type="primary" @click="getList"  size="mini">查询</el-button>
            <el-button @click="resetForm('formQuery')"  size="mini">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 按钮 -->
<!--      <section class="from-container addBtn">-->
<!--        <el-button v-if="hasPermission('basis:approvice:add')" type="primary" size="mini" @click="add">新增审批设置</el-button>-->
<!--      </section>-->
      <el-table
        size="mini"
        :data="tableData"
        style="width: 100%"
        row-key="id"
        border
        :header-cell-style="{
          'background-color': '#eeeeee !important',
        }"
        :row-class-name="tableRowClassName"
        :default-sort = "{prop: 'label', order: 'descending'}"
      >
        <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
        <el-table-column prop="approvelItemType" label="事项编号" align="center"></el-table-column>
        <el-table-column prop="approvelItemName" label="审批事项名称"></el-table-column>
        <el-table-column prop="approvelCondition" label="启动审批前提条件"></el-table-column>
        <el-table-column prop="flowId" label="工作流ID"></el-table-column>
        <el-table-column prop="flowName" label="工作流名称" align="center"></el-table-column>

        <el-table-column label="操作" width="250">

          <template slot-scope="scope">
            <span style="padding-right: 15px"></span>
            <el-link type="primary" :underline="false" @click="edit(scope.row)"  v-if="hasPermission('basis:approvice:edit')">设置</el-link>
            <span style="padding-right: 15px"></span>
            <template v-for="item in $dictUtils.getDictList('state')">
            <el-link type="primary" v-if="item.value !=='-1'&&hasPermission('basis:approvice:edit')&& item.value!==(scope.row.state+'')"
              :underline="false" @click="modifyState(item.value,scope.row)" :disabled="(scope.row.state===-1&& item.value==='0')||item.value==scope.row.state">{{item.label}}
            </el-link>
            </template>
            <!-- <el-link type="primary" :underline="false" :disabled='scope.row.state==1' @click="modifyState(scope.row)" v-if="hasPermission('basis:approvice:edit')" >启用</el-link>
            <span style="padding-right: 15px"></span>
            <el-link type="primary" :underline="false" :disabled='scope.row.state==0' @click="modifyState(scope.row)" v-if="hasPermission('basis:approvice:edit')">停用</el-link>
            <span style="padding-right: 15px"></span> -->

          </template>
        </el-table-column>
      </el-table>

      <!-- 弹窗, 新增 / 修改 -->
      <edit-form ref="editForm" @refreshDataList="getList" ></edit-form>
      <!-- 自定义表头 -->

      <el-pagination
        background
        @size-change="handlerSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="formQuery.pageNo"
        :page-size="formQuery.pageSize"
        layout="total,sizes,prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>

import {getList, modifyState} from '@/api/basis/approveItemFlow/approveItemFlow.js'
import editForm from './editForm'

export default {
  data () {
    return {
      tableData: [],
      formQuery: {
        approvelItemName: '',
        pageNo: 1,
        pageSize: 10
      },
      state: 0,
      switchValue: true,
      total: 1
    }
  },
  components: {
    editForm
  },
  filters: {
    typesFilter: function (value) {
      if (value === 1) {
        return '业务模块'
      } else if (value === 2) {
        return '功能模块'
      }
    }
  },
  activated () {
    this.getList()
  },
  methods: {
    // 获取列表
    getList () {
      getList(this.formQuery).then(res => {
        console.log(res.data)
        if (res.data.code === 200) {
          this.tableData = res.data.page.list
          this.total = res.data.page.count
        }
      })
    },
    //分页大小改变
    handlerSizeChange(val){
      this.formQuery.pageSize=val;
      this.getList()
    },
    // 新增
    add () {
      this.$refs.editForm.init('add', '')
    },
    // 修改
    edit (row) {
      this.$refs.editForm.init('edit', row, {id: '', parent: {id: '', name: ''}})
    },
    // 禁用系统
    modifyState (item,row) {
      if (row.state === 0) {
        this.state = 1
      } else {
        this.state = 0
      }
      this.$confirm('确定要修改此审批设置状态吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          modifyState({id: row.id, state: this.state}).then(res => {
            console.log(res.data)
            if (res.data.code === '200') {
              this.$message({
                type: 'success',
                message: '修改审批设置状态成功!'
              })
              this.getList()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改审批设置状态'
          })
        })
    },
    // 新
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.formQuery.pageNo = val
      this.getList()
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    },
    resetForm () {
      this.formQuery = {
        type: '0',
          approvelItemName: '',
        pageNo: 1,
        pageSize: 10
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
::v-deep .el-table .warning-row {
  background: #f7f7f7;
}
.from-container {
  margin-bottom: 10px;
}

.el-table .success-row {
  background: #f0f9eb;
}
::v-deep .el-table__column-filter-trigger{
  position: absolute;
  right: 15px;
}
.addBtn{
  margin: 20px 0;
}
</style>
